<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

</head>

<body>
    <navigation-link url="/profile">
        Your Profile
    </navigation-link>
    <a v-bind:href="url" class="nav-link">
        <slot></slot>
    </a>
    <navigation-link url="/profile">
        <!-- Add a Font Awesome icon -->
        <span class="fa fa-user"></span>
        Your Profile
    </navigation-link>
    <navigation-link url="/profile">
        <!-- Use a component to add an icon -->
        <font-awesome-icon name="user"></font-awesome-icon>
        Your Profile
    </navigation-link>
    <app>
        <app-header></app-header>
        <app-footer></app-footer>
    </app>
    <!-- 无效 -->
    <child-component v-show="someChildProperty">
    </child-component>

    <div>
        <h2>我是子组件的标题</h2>
        <slot>
            只有在没有要分发的内容时才会显示。
        </slot>
    </div>

    <div>
        <h1>我是父组件的标题</h1>
        <my-component>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </my-component>
    </div>

    <div>
        <h1>我是父组件的标题</h1>
        <div>
            <h2>我是子组件的标题</h2>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </div>
    </div>

    <div class="container">
        <header>
            <!-- We want header content here -->
        </header>
        <main>
            <!-- We want main content here -->
        </main>
        <footer>
            <!-- We want footer content here -->
        </footer>
    </div>

    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>

    <base-layout>
        <template slot="header">
            <h1>Here might be a page title</h1>
        </template>

        <p>A paragraph for the main content.</p>
        <p>And another one.</p>

        <template slot="footer">
            <p>Here's some contact info</p>
        </template>
    </base-layout>

    <base-layout>
        <h1 slot="header">Here might be a page title</h1>

        <p>A paragraph for the main content.</p>
        <p>And another one.</p>

        <p slot="footer">Here's some contact info</p>
    </base-layout>

    <div class="container">
        <header>
            <h1>Here might be a page title</h1>
        </header>
        <main>
            <p>A paragraph for the main content.</p>
            <p>And another one.</p>
        </main>
        <footer>
            <p>Here's some contact info</p>
        </footer>
    </div>

    <button type="submit">
        <slot>Submit</slot>
    </button>

    <navigation-link url="/profile">
        Logged in as {{ user.name }}
    </navigation-link>



    



    <script>
        Vue.component('child-component', {
            // 有效，因为是在正确的作用域内
            template: '<div v-show="someChildProperty">Child</div>',
            data: function () {
                return {
                    someChildProperty: true
                }
            }
        })
    </script>
</body>

</html>